@import "../global/global";

// Input
//
// Markup:
// <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">
//
// :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
// :active              - Active state, also available as the `.ring-input_active` class name.
// :focus               - Focus state, also available as the `.ring-input_focus` class name.
// .ring-input_correct  - The entered value is correct.
// .ring-input_error    - The entered value is incorrect.

@mixin focused_input {
  border-color: $ring-blue-color;
  outline: 0;
}

.ring-input {
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  padding-right: $ring-unit/ 2;
  padding-left: $ring-unit / 2;
  padding-bottom: 3px;
  border: 1px solid $ring-gray-color;
  background-color: #FFF;

  @include ring-font;
  line-height: 20px;
  height: 3*$ring-unit;
  width: 100%;

  &:active, &:focus, &_active, &_focus {
    @include focused_input;
  }

  &_correct {
    border-color: $ring-green-color;
  }

  &_error {
    border-color: #F00;
  }

  &_no-resize {
    resize: none;
  }

  &_filter-popup {
    min-width: 200px;
    width: 100%;
  }

  &_material {
    padding-left: 0;
    padding-right: 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
}

// Using double selector to enforce specificity, that is hard to express with &
.ring-input.ring-input:disabled, .ring-input.ring-input[disabled], .ring-input.ring-input_disabled {
  @include ring-input-disabled;
}

textarea.ring-input {
  height: auto;
  min-height: 8*$ring_unit;
  resize: vertical;
}
